<template>
  <div class="login_container">
    <el-row :gutter="20">
      <el-col :span="6" :offset="9">
        <div class="login_box">
          <el-form
            :model="loginForm"
            :rules="loginFromRules"
            ref="loginFormRef"
          >
            <!-- 账号 -->
            <el-form-item prop="username" ref="loginFormRef">
              <el-input
                prefix-icon="el-icon-user"
                v-model="loginForm.username"
                placeholder="账号"
                autosize
              />
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input
                prefix-icon="el-icon-lock"
                v-model="loginForm.password"
                placeholder="密码"
                type="password"
                show-password
                autosize
              />
            </el-form-item>
            <!-- 按钮区域 -->
            <el-form-item>
              <el-row :gutter="20">
                <el-col :span="5" :offset="12">
                  <el-button
                    class="btns"
                    type="primary"
                    size="default"
                    @click="login"
                  >
                    登录
                  </el-button>
                </el-col>
                <el-col :span="5" :offset="0">
                  <el-button
                    class="btns"
                    type="info"
                    size="default"
                    @click="reset"
                  >
                    重置
                  </el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      loginFromRules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 1,
            max: 20,
            message: '长度在 1 到 20 个字符',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    login: function () {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        // await只能用在athink修饰的方法，除非这个方法市异步的
        var { data: res } = await this.$axios.post('login', this.loginForm)
        if (res.meta.status !== 200) {
          console.log('登录失败')
          this.$message.error('用户名或密码错误')
          return
        }
        this.$message.success('登录成功')
        this.$store.commit('setToken', res.data.token)
        this.$router.push('/home')
      })
    },
    // 重置表单
    reset: function() {
      this.$refs.loginFormRef.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.login_container {
  background: #2b4b6b;
  height: 100%;
}
.login_box {
  width: 400px;
  height: 200px;
  background: white;
  margin-top: 50%;

  .btns {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
